<template>
  <div class="set-tranfer-number">
    <a-form ref="formRef" autocomplete="off" name="basic" :model="formState" :label-col="{ style: 'width:80px' }" :wrapper-col="{ style: 'calc(100% - 80px)' }">
      <a-form-item label="周期" name="month" :rules="[{ required: true, message: '请输入周期', trigger: 'change' }]">
        <a-input-number v-model:value="formState.month" :min="1" :max="12" :precision="0" placeholder="请输入月数" />
      </a-form-item>

      <a-form-item label="日期" name="day" :rules="[{ required: true, message: '请输入日期', trigger: 'change' }]">
        <a-input-number v-model:value="formState.day" :precision="0" :min="1" :max="28" placeholder="请输入日期" />
      </a-form-item>
    </a-form>

    <div class="submit-btn-form-item">
      <a-button :loading="loading" type="primary" @click="onSubmit" v-debounce>保 存</a-button>
      <a-button @click="resetForm">取 消</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { toRefs, watch } from "vue";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    type: number;
    passData: DepartmentPersonnel.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "submit"): void;
  (e: "update:visible", visible: boolean): void;
}>();

const { visible, passData, type } = toRefs(props);

const { formState, loading, formRef } = InitHook();
const { onSubmit, resetForm } = OperationHook({
  formState,
  loading,
  formRef,
  emit,
  type
});

//获取数据
const init = () => {
  if (type.value === 2) {
    Object.assign(formState, passData.value);
  }
};

watch(
  () => visible.value,
  v => {
    if (v) {
      init();
    } else {
      resetForm();
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.set-tranfer-number {
  background-color: #fff;

  .operation-btn-wrapper {
    :deep(.ant-btn) {
      margin-right: 16px;
    }
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  :deep(.ant-input-number) {
     width :50%
    }
}
</style>
